<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table border="1" id="box">
        <tr>
            <th><input type="text" id="scid" placeholder="请输入id"></th>
            <th><button id="sc">删除</button></th>

        </tr>
        <tr>
            <th> </th>
            <th> <input type="text" id="spzp"></th>
            <th><input type="text" id="spmc"></th>
            <th><input type="text" id="spjg"></th>
            <th><input type="text" id="cjsj"></th>
            <th><input type="text" id="kc"></th>
            <th><input type="text" id="xq"></th>
            <th><button id="tj">添加</button></th>
            
        </tr>
        <tr>
            <th>商品ID</th>
            <th>商品照片</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>创建时间</th>
            <th>库存</th>
            <th>详情</th>
        </tr>

    </table>
    <script src="./jquery-1.8.3.min.js"></script>
    <script>
        $.ajax({
            url: "http://172.16.106.87:8080/ShowGoods",
            type: "get",
            success: function (a) {
                // console.log(a.data);  
                grxx(a.data);

            },
        });

        function grxx(data) {
            console.log(data);
            var tbody = document.querySelector('#box');
            data.forEach(a => {
                var tr = document.createElement("tr");
                tr.innerHTML = ` 

                        <tr>
                            <td>${a.goodsId}</td> 
                            <td>${a.goodsPhoto}</td> 
                            <td>${a.goodsName}</td>    
                            <td>${a.goodsPrice}</td>
                            <td>${a.goodsCreationTime}</td>  
                            <td>${a.goodsInventory}</td>
                            <td>${a.goodSdetail}</td>
                            
                        </tr>
                `;
                tbody.appendChild(tr);
            });
        }
        var sc = document.getElementById("scid")
        $("#sc").click(function () {

            $.ajax({
                url: "http://172.16.106.87:8080/delGoods",
                type: "get",
                data: {
                    id: $("#scid").val()
                },
                success(b) {
                    console.log(b);
                }
            })
            location.reload()
            function sc() {

            }
        })
        $("#tj").click(function () {
            $.ajax({
                url: "http://172.16.106.87:8080/addGoods",
                type: "get",
                data:{
                    goodsPhoto:$("#spzp").val(),
                    goodsName:$("#spmc").val(),
                    goodsPrice:$("#spjg").val(),
                    goodsCreationTime:$("#cjsj").val(),
                    goodsInventory:$("#kc").val(),
                    goodSdetail:$("#xq").val(),

                },
                success(c){
                    console.log(c);
                    
                }
            })
        })
        location.reload()
    </script>
</body>

</html>